<template>
  <div class="chart-container" ref="chartDom" style="scale: 0.9;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ChargeRank',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartDom)

      const option = {
        tooltip: {},
        xAxis: {
          data: [
            '南京XX充电站',
            '杭州某站',
            '郑州智慧充电站',
            '南昌能源站',
            '龙湾机场T1区站',
            '越城区某站',
            '株洲电站',
            '天津某电站',
            '济南高新区东站',
            'ETC服务区电站'
          ],
          axisLabel: {
            rotate: 45,
            color: '#fff'
          }
        },
        yAxis: {
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          }
        },
        series: [
          {
            name: '充电量',
            type: 'bar',
            data: [5556, 3594, 3138, 2448, 2436, 2364, 2142, 2136, 1800, 1786.6],
            itemStyle: {
              color: '#36C4FF'
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            }
          }
        ],
        grid: {
          top: 60,
          bottom: 70,
          left: 40,
          right: 20
        }
      }

      this.chart.setOption(option)
      window.addEventListener('resize', this.chart.resize)
    }
  },
  beforeDestroy() {
    if (this.chart) {
      window.removeEventListener('resize', this.chart.resize)
      this.chart.dispose()
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 300px;
}
</style>
